/* 
    ریست اولیه CSS
    این بخش باعث می‌شود مرورگرهای مختلف، فاصله‌ها و اندازه‌گیری‌ها را یکسان‌تر نمایش دهند.
*/
* {
    margin: 0; /* حذف فاصله بیرونی پیش‌فرض همه عناصر */
    padding: 0; /* حذف فاصله داخلی پیش‌فرض همه عناصر */
    box-sizing: border-box; /* باعث می‌شود width و height شامل padding و border هم بشوند */
}

/* 
    تنظیمات کلی صفحه
    اینجا کل کارت در مرکز صفحه قرار می‌گیرد.
*/
body {
    background: #111; /* رنگ پس‌زمینه کل صفحه؛ خاکستری بسیار تیره نزدیک به مشکی */

    display: flex; /* فعال‌سازی Flexbox برای چیدمان آسان */
    justify-content: center; /* وسط‌چین کردن کارت در محور افقی */
    align-items: center; /* وسط‌چین کردن کارت در محور عمودی */

    min-height: 100vh; /* حداقل ارتفاع برابر با کل ارتفاع صفحه نمایش */

    font-family: 'Vazirmatn', sans-serif; /* فونت اصلی صفحه؛ مناسب متن فارسی */
}

/* 
    دایره بزرگ زیر لوگو یا پشت بخش بالایی کارت
    این دایره نقش یک المان تزئینی نورانی و سه‌بعدی را دارد.
*/
.hero-circle {
    position: absolute; /* خروج از جریان عادی صفحه و امکان جای‌گذاری دقیق */
    
    width: 135%; /* بزرگ‌تر از عرض والد برای ایجاد دایره بزرگ‌تر از کادر */
    aspect-ratio: 1; /* نسبت عرض به ارتفاع را 1 به 1 می‌کند؛ یعنی مربع، سپس با border-radius تبدیل به دایره می‌شود */

    right: -5%; /* دایره کمی از سمت راست بیرون زده است */
    top: -30%; /* دایره از بالا بیرون زده تا فقط بخشی از آن دیده شود */

    border-radius: 50%; /* تبدیل شکل به دایره کامل */
    overflow: hidden; /* هر چیزی که از مرز دایره بیرون بزند مخفی می‌شود */

    z-index: 5; /* تعیین لایه نمایش؛ بالاتر از پس‌زمینه ولی پایین‌تر از عناصر مهم‌تر */

    transition: all .4s ease; /* نرم کردن تغییرات مثل تغییر سایه هنگام hover */

    background: radial-gradient(
        circle at 30% 30%, /* مرکز نور کمی به بالا و چپ منتقل شده برای حس حجم */
        #666 0%, /* روشن‌ترین قسمت گرادینت */
        #333 35%, /* خاکستری تیره‌تر در میانه */
        #111 70%, /* نزدیک به مشکی */
        #000 100% /* کاملاً مشکی در لبه‌ها */
    ); /* گرادینت شعاعی برای ساخت حالت کروی و سه‌بعدی */

    border: 1px solid rgba(255, 255, 255, .08); /* خط دور بسیار کم‌رنگ برای جدا کردن دایره از زمینه */

    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.463), /* نور نزدیک و نسبتاً روشن دور دایره */
        0 0 50px rgba(235, 235, 235, 0.203); /* نور پخش‌تر و نرم‌تر */
}

/* 
    حالت هاور دایره
    وقتی موس روی دایره می‌رود، نور اطراف آن بیشتر می‌شود.
*/
.hero-circle:hover {
    box-shadow:
        0 0 30px rgba(255, 255, 255, 0.694), /* افزایش شدت نور نزدیک */
        0 0 80px rgba(235, 235, 235, 0.34); /* افزایش گستردگی نور بیرونی */
}

/* 
    عکس محو داخل دایره یا پس‌زمینه
    برای ساخت حالت شبح‌مانند و تزئینی استفاده می‌شود.
*/
.hero-ghost {
    position: absolute; /* امکان قرارگیری آزاد داخل والد */
    
    width: 160%; /* عرض برابر والد */
    height: 160%; /* ارتفاع برابر والد */

    left: -20%; /* کمی   جابه‌جایی به سمت چپ */
    top:0%; /* پایین آوردن عکس درون دایره */

    object-fit: scale-down; /* تصویر کوچک می‌شود تا کامل داخل کادر جا بگیرد و بریده نشود */

    opacity: .15; /* محو کردن تصویر؛ فقط ۱۵ درصد دیده می‌شود */

    filter:
        grayscale(100%) /* سیاه‌وسفید کردن کامل تصویر */
        brightness(.8); /* کمی تاریک‌تر کردن تصویر */
}

/* 
    هاله نور یا سایه داخلی روی دایره
    این لایه عمق بیشتری به دایره می‌دهد.
*/
.hero-glow {
    position: absolute; /* قرارگیری دقیق روی کل دایره */

    inset: 0; /* معادل top/right/bottom/left صفر؛ یعنی پر کردن کل والد */

    border-radius: 100%; /* گرد کردن کامل لایه برای هماهنگی با دایره */

    pointer-events: none; /* این لایه مزاحم کلیک یا هاور روی عناصر دیگر نمی‌شود */

    box-shadow:
        inset 0 0 40px rgb(0, 0, 0), /* سایه داخلی برای تاریک‌تر شدن لبه‌ها */
        0 0 40px rgba(0, 0, 0, 0.26); /* سایه خارجی ملایم و تیره */
}

/* 
    لبه نقره‌ای دایره با pseudo-element
    بدون اضافه کردن HTML جدید، یک خط دور دایره ساخته می‌شود.
*/
.hero-circle::after {
    content: ""; /* برای فعال شدن pseudo-element الزامی است */

    position: absolute; /* قرار گرفتن روی خود دایره */

    inset: 0; /* پوشاندن کامل سطح دایره */

    border-radius: 50%; /* هماهنگ با فرم دایره */

    border: 3px solid rgba(255, 255, 255, .08); /* لبه نقره‌ای بسیار ظریف */

    pointer-events: none; /* اجازه می‌دهد موس با خود دایره تعامل داشته باشد */
}

/* 
    کارت اصلی
    تمام عناصر طراحی داخل این کادر قرار می‌گیرند.
*/
.card {
    position: relative; /* مرجع موقعیت‌دهی برای عناصر absolute داخل کارت */

    width: min(95vw, 420px); /* عرض کارت: حداکثر ۴۲۰ پیکسل ولی در موبایل ۹۵ درصد صفحه */

    aspect-ratio: 1242 / 2208; /* حفظ نسبت طراحی اصلی؛ مناسب کارت عمودی شبیه استوری */

    overflow: hidden; /* جلوگیری از بیرون‌زدگی عناصر از کارت */

    background: black; /* رنگ پایه کارت در صورت نبود تصویر پس‌زمینه */

    box-shadow:
        0 0 40px rgba(0, 0, 0, .6); /* سایه اطراف کارت برای جدا شدن از پس‌زمینه */
}

/* 
    تصویر پس‌زمینه کارت
    کل کارت را پوشش می‌دهد.
*/
.bg {
    position: absolute; /* قرارگیری پشت همه عناصر */

    inset: 0; /* پر کردن کل کارت */
    top: 50px;
    width: 100%; /* عرض کامل */
    height: 100%; /* ارتفاع کامل */

    object-fit: cover; /* تصویر کل فضا را می‌پوشاند؛ ممکن است کمی برش بخورد */
    opacity:.5;
      filter:
        grayscale(100%) /* سیاه‌وسفید کردن کامل تصویر */
        brightness(.9); /* کمی تاریک‌تر کردن تصویر */
}

/* 
    قاب لوگو
    لوگو در بالا سمت چپ قرار می‌گیرد.
*/
.logo-frame {
    position: absolute; /* جای‌گذاری دقیق لوگو روی کارت */

    left: 3%; /* فاصله از سمت چپ کارت */
    top: 4%; /* فاصله از بالای کارت */

    width: 35%; /* اندازه لوگو نسبت به عرض کارت */

    z-index: 10; /* بالاتر از پس‌زمینه و دایره‌های تزئینی */
}

/* تصویر داخل قاب لوگو */
.logo-frame img {
    width: 100%; /* تصویر تمام عرض قاب را بگیرد */
    display: block; /* حذف فاصله ریز زیر تصویر که inline بودن ایجاد می‌کند */
}

/* 
    شعار یا متن کوتاه برند
*/
.slogan {
    position: absolute; /* جای‌گذاری مستقل روی کارت */

    left: 6%; /* فاصله از چپ */
    top: 10%; /* فاصله از بالا */

    font-size: .9rem; /* اندازه متن شعار */

    font-weight: 700; /* ضخامت زیاد برای خوانایی بهتر */

    color: white; /* رنگ سفید برای کنتراست بالا روی زمینه تیره */

    z-index: 10; /* نمایش روی لایه‌های تزئینی */
}

/* 
    قاب QR Code
*/
.qr-frame {
    position: absolute; /* قرارگیری دقیق QR در گوشه بالا */

    right: 4%; /* فاصله از سمت راست */
    top: 3%; /* فاصله از بالا */

    width: 18%; /* اندازه QR نسبت به عرض کارت */

    aspect-ratio: 1; /* QR همیشه مربع می‌ماند */

    z-index: 10; /* بالاتر از پس‌زمینه */
}

/* تصویر QR */
.qr-frame img {
    width: 100%; /* پر کردن عرض قاب */
    height: 100%; /* پر کردن ارتفاع قاب */

    object-fit: contain; /* QR کامل دیده شود و بریده نشود */
}

/* 
    متن ذخیره مخاطب یا توضیح کنار QR
*/
.save-text {
    position: absolute; /* جای‌گذاری دقیق زیر یا کنار QR */

    right: 7%; /* فاصله از راست */

    top: 14%; /* فاصله از بالا */

    font-size: .85rem; /* اندازه نسبتاً کوچک */

    color: white; /* رنگ سفید برای خوانایی */

    z-index: 10; /* بالاتر از عناصر تزئینی */
}

/* 
    قاب تصویر محو در پس‌زمینه
*/
.ghost-frame {
    position: absolute; /* قرارگیری آزاد روی کارت */

    left: 10%;/* چسبیده به لبه چپ */
    top:-80%; /*وع از نزدیک بالای کارت */

    width: 32%; /* عرض تصویر شبح */
    height: 35%; /* ارتفاع تصویر شبح */

    opacity: .18; /* شفافیت کم برای پس‌زمینه‌ای شدن تصویر */

    overflow: hidden; /* بخش‌های اضافه تصویر مخفی شوند */
 
    z-index: 2; /* پشت عناصر اصلی ولی روی پس‌زمینه */
}

.ghost-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* 1. اول زوم می‌کنیم (مثلاً 1.5 برابر) تا فضای مانور داشته باشیم */
    transform: scale(1.5); 
    
    /* 2. حالا با translate عکس را در مختصات جابجا می‌کنیم */
    /* عدد اول: چپ/راست، عدد دوم: بالا/پایین */
    transform-origin:right;
    translate: 0% 20%; 
    
    filter: grayscale(100%) blur(5);
    display: block; /* این خیلی مهم است */
}

/* 
    قاب عکس اصلی پروفایل
*/
.profile-frame {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%; 
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden; /* این باعث می‌شود زوم‌ها بیرون نزنند */
    border: 6px solid rgba(167, 167, 167, 0.418);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.575);
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.795);
    z-index: 20;

    /* کنترلر تو */
    --zoom: 2.5;
    --pan-x: 45%;    /* الان روی صفر بگذار */
    --pan-y: 0%;   /* عدد مثبت یعنی عکس را پایین ببر تا سرِ سوژه دیده شود */
}
 
/* عکس داخل پروفایل */
.profile-frame img {
    width: 110%;
    height: 100%;
    /* object-fit: cover حذف شد تا با transform تداخل نداشته باشد */
    
    transform-origin: center;
    /* ترتیب مهم است: ابتدا translate سپس scale */
    transform: translate(var(--pan-x), var(--pan-y)) scale(var(--zoom));
}

/* 
    بخش تماس یا تصویر دکمه تماس
*/
.call-frame {
    position: absolute; /* جای‌گذاری دقیق در بخش میانی کارت */

    left: 28%; /* فاصله از چپ */

    top: 57%; /* قرارگیری تقریبی در نیمه پایین کارت */

    width: 38%; /* عرض دکمه تماس نسبت به کارت */

    z-index: 30; /* بالاتر از عکس و دایره‌های تزئینی */
}

/* تصویر داخل دکمه تماس */
.call-frame img {
    width: 100%; /* تصویر دکمه تمام عرض قاب را بگیرد */
    display: block; /* جلوگیری از فاصله اضافی زیر تصویر */
}

/* 
    دایره رنگی پایین کارت
*/
.bottom-circle {
    position: absolute; /* قرارگیری مستقل در پایین کارت */

    width:150%; /* تقریباً هم‌اندازه عرض کارت */

    aspect-ratio: 1; /* دایره کامل */

    right: -55%; /* بیرون‌زدگی از سمت راست */

    bottom: -52%; /* بیرون‌زدگی از پایین */

    border-radius: 50%; /* تبدیل به دایره */

    background: linear-gradient(
     240deg,
     
          
    #332f6c 40%,  /* رنگ اول از ۲۰٪ شروع به محو شدن می‌کند */
    #a04607 65%   /* رنگ دوم در ۸۰٪ کاملاً جا می‌افتد */   );
    z-index: 3; /* پشت متن و آیکون‌ها، جلوتر از پس‌زمینه */
}

/* 
    تنظیمات عمومی همه آیکون‌ها
*/
.icon {
    position: absolute; /* هر آیکون جداگانه جای‌گذاری می‌شود */

    width:15%; /* اندازه یکسان برای همه آیکون‌ها */

    aspect-ratio: 1; /* حفظ حالت مربع برای آیکون */

    z-index: 40; /* آیکون‌ها بالاتر از دایره پایین و پس‌زمینه دیده شوند */
}

/* تصویر داخل آیکون */
.icon img {
    width: 100%; /* تصویر آیکون تمام عرض را بگیرد */
    height: 100%; /* تصویر آیکون تمام ارتفاع را بگیرد */

    object-fit: contain; /* آیکون بدون برش و کامل نمایش داده شود */
}

/* 
    موقعیت آیکون روبیکا
*/
.rubika {
    left: 42%; /* موقعیت افقی آیکون */
    top: 67%; /* موقعیت عمودی آیکون */
}

/* 
    موقعیت آیکون واتساپ
*/
.whatsapp { 
    left: 60%; /* قرارگیری در ادامه ردیف بالا */
    top: 64%; /* هم‌ردیف با روبیکا */
}

/* 
    موقعیت آیکون وب‌سایت
*/
.website {
    left: 79%; /* نزدیک‌تر به سمت راست */
    top: 64%; /* هم‌ردیف با دو آیکون قبلی */
}

/* 
    موقعیت آیکون بله
*/
.bale {
    left: 26%; /* کمی پایین‌تر و چپ‌تر از ردیف بالا */
    top: 73%; /* شروع ردیف دوم یا مسیر مورب آیکون‌ها */
}

/* 
    موقعیت آیکون اینستاگرام
*/
.instagram {
    left: 13%; /* جابه‌جایی به سمت چپ */
    top: 81%; /* پایین‌تر از بله */
}

/* 
    موقعیت آیکون لوکیشن
*/
.location {
    left:4%; /* نزدیک لبه چپ */
    top: 90%; /* نزدیک پایین کارت */
}

/* 
    بخش محتوای متنی کارت
    معمولاً شامل نام، عنوان، توضیح یا اطلاعات تماس است.
*/
.content {
    position: absolute; /* قرارگیری دقیق متن روی کارت */

    right: 6%; /* فاصله متن از سمت راست */

    left: 42%; /* شروع متن از حدود میانه کارت؛ این باعث محدود شدن عرض متن می‌شود */

    bottom: 7%; /* فاصله از پایین کارت */

    color: white; /* رنگ متن سفید */

    z-index: 50; /* بالاترین لایه برای خوانایی متن */
}

/* عنوان اصلی داخل بخش محتوا */
.content h1 {
    font-size: clamp(12px, 3vw, 5px); /* اندازه هوشمند: حداقل ۲۲، وابسته به صفحه، حداکثر ۴۰ پیکسل */

    font-weight: 300; /* ضخامت زیاد برای تأکید روی نام یا عنوان */

    margin-bottom: 15px; /* فاصله عنوان از پاراگراف پایین */
}

/* پاراگراف توضیحات داخل بخش محتوا */
.content p {
    font-size: clamp(10px, 1.8vw, 5px); /* اندازه واکنش‌گرا برای متن توضیحی */

    line-height: 2; /* فاصله خطوط زیاد برای خوانایی بهتر در متن فارسی */
}